
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 第二步：开始写CSS */
        /* 整个A的样式，设置一个背景图 */
        .course_item{
            width: 500px;
            height: 500px;
            background-image: url(./images/pic3.png);
            background-size: 100% 100%;
            position: relative;
            perspective: 300px;
            -webkit-perspective: 500;
            display: block;
            cursor: pointer;
            margin: 200px auto 0;
        }
        /* 默认标题样式 */
        .course_item_name{
            color: #FFFFFF;
            font-size: 18px;
            font-weight: 600;
            position: absolute;
            bottom: 30px;
            left: 40px;
        }
        /* 倾斜遮罩层的样式 */
        .course_item_modal{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.7);
            transform: rotateY(0deg);
            transform-origin: left;
            /* 默认隐藏 */
            display: none;
        }
        .course_item_inner{
            width: 100%;
            height: 100%;
            color: #FFFFFF;
            font-size: 14px;
            padding-left: 40px;
            padding-right: 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .course_item_modal h4{
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 38px;
        }
        /* 鼠标悬停后的样式 */
        .course_item_modal.active{
            /* 鼠标悬停后显示 */
            display: block;
            /* 以左边为旋转基点 */
            transform-origin: left;
            /* 设置一个动画 */
            animation: animate 0.5s;
            animation-fill-mode:forwards;
            /* Safari 和 Chrome */
            -webkit-animation-fill-mode:forwards; 
        }
        @keyframes animate {
            to {
            /* 沿着Y轴3D旋转，出现哪个悬停层往里倾斜的效果 */
            transform: rotateY(5deg);
            }
        }
    </style>
</head>
<body>
<!-- 第一步：写好html布局，默认标题，鼠标悬停出现倾斜遮罩层 -->
<div class="container">
    <a href="javascript:void(0);" class="course_item">
        <p class="course_item_name">前端学习（VUE方向）</p>
        <div class="course_item_modal">
            <div class="course_item_inner">
                <h4>前端学习（VUE方向）</h4>
                <p>目前，Web新开发的项目有80%以上都采用前后端分离的模式，
                    不管后端使用哪一种语言开发， 前端都是一样的技术， 
                    现在能熟练使用Vue， 在一线城市起步薪资基本上最少10000元起！
                    死磕Vue3，大前端程序员速成必学！</p>
            </div>
        </div>
    </a>
</div>
<script src="./js/jquery-1.8.3.min.js" type="text/javascript">
</script>
<script>
    // 第三步：写JS，鼠标悬停到course_item上，隐藏默认标题
    // 给倾斜遮罩层添加class“active”
    $(function() {
        $('.course_item').mouseenter(function() {
            $(this).find('.course_item_name').hide();
            $(this).find('.course_item_modal').addClass('active')
        }).mouseleave(function() {
            $(this).find('.course_item_name').show();
            $(this).find('.course_item_modal').removeClass('active')
        })
    })
</script>
</body>
</html>
